<template>
  <v-container fluid>
    <v-row dense>
      <v-col cols="4">
        <v-card class="profile">
          <v-container>
            <v-row class="pa-6" dense>
              <v-col cols="4">
                <div class="d-flex justify-center align-center">
                  <v-badge bordered overlap color="avatar-badge" offset-x="26" offset-y="30" content="M4" left>
                    <v-avatar color="orange" size="110">
                      <v-img src="@/assets/logo.png"></v-img>
                    </v-avatar>
                  </v-badge>
                </div>
              </v-col>
              <v-col cols="8">
                <div class="text-h5 font-weight-bold"> Sunson </div>
                <div class="text-subtitle-1 font-weight-light mt-2">R&amp;D Director</div>
                <div class="mt-2">
                  <v-chip color="purple" text-color="white" label small>团队管理</v-chip>
                  <v-chip class="ml-2" color="green" text-color="white" label small>灵魂讲师</v-chip>
                  <v-chip class="ml-2" color="primary" text-color="white" label small>全栈架构</v-chip>
                </div>
              </v-col>
            </v-row>
          </v-container>
        </v-card>
        <v-card class="mt-3 profile">
          <v-card-title class="pa-5 pb-2">
            <p class="text-h6 grey--text">工作量</p>
            <v-spacer></v-spacer>
            <v-select class="greyBold--text font-weight-bold" solo flat hide-details dense single-line v-model="project.type" :items="project.types" @change="changeProjectPeriod"></v-select>
          </v-card-title>
          <v-sparkline class="ma-5" :value="project.periods" fill></v-sparkline>
        </v-card>
      </v-col>
      <v-col cols="8">
        <v-card>
          <v-sheet tile height="54" class="d-flex">
            <v-btn icon class="ma-2" @click="$refs.calendar.prev()">
              <v-icon>mdi-chevron-left</v-icon>
            </v-btn>
            <v-select v-model="calendar.type" :items="calendar.types" dense outlined hide-details class="ma-2" label="type"></v-select>
            <v-select v-model="calendar.mode" :items="calendar.modes" dense outlined hide-details label="event-overlap-mode" class="ma-2"></v-select>
            <v-select v-model="calendar.weekday" :items="calendar.weekdays" dense outlined hide-details label="weekdays" class="ma-2"></v-select>
            <v-spacer></v-spacer>
            <v-btn icon class="ma-2" @click="$refs.calendar.next()">
              <v-icon>mdi-chevron-right</v-icon>
            </v-btn>
          </v-sheet>
          <v-sheet height="600">
            <v-calendar ref="calendar" v-model="calendar.value" :weekdays="calendar.weekday" :type="calendar.type" :events="calendar.events" :event-overlap-mode="calendar.mode" :event-overlap-threshold="30" :event-color="getEventColor" @change="getEvents"></v-calendar>
          </v-sheet>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
  export default {
    data() {
      return {
        project: {
          type: 'Daily',
          types: ['Daily', 'Weekly', 'Monthly'],
          periods: []
        },
        calendar: {
          type: 'month',
          types: ['month', 'week', 'day', '4day'],
          mode: 'stack',
          modes: ['stack', 'column'],
          weekday: [0, 1, 2, 3, 4, 5, 6],
          weekdays: [
            { text: 'Sun - Sat', value: [0, 1, 2, 3, 4, 5, 6] },
            { text: 'Mon - Sun', value: [1, 2, 3, 4, 5, 6, 0] },
            { text: 'Mon - Fri', value: [1, 2, 3, 4, 5] },
            { text: 'Mon, Wed, Fri', value: [1, 3, 5] },
          ],
          value: '',
          events: [],
          colors: ['blue', 'indigo', 'deep-purple', 'cyan', 'green', 'orange', 'grey darken-1'],
          names: ['Meeting', 'Holiday', 'PTO', 'Travel', 'Event', 'Birthday', 'Conference', 'Party']
        }
      }
    },
    mounted() {
      this.changeProjectPeriod()
    },
    methods: {
      changeProjectPeriod() {
        let periods = []
        let start = 0
        for (let i = 0; i < 30; i++) {
          start += this.$vcext.randInt(50, 50 + i * 100)
          periods.push(start)
        }
        this.project.periods = periods
      },
      getEvents({ start, end }) {
        const events = []
        const min = new Date(`${start.date}T00:00:00`)
        const max = new Date(`${end.date}T23:59:59`)
        const days = (max.getTime() - min.getTime()) / 86400000
        const eventCount = this.$vcext.randInt(days, days + 20)

        for (let i = 0; i < eventCount; i++) {
          const allDay = this.$vcext.randInt(0, 3) === 0
          const firstTimestamp = this.$vcext.randInt(min.getTime(), max.getTime())
          const first = new Date(firstTimestamp - (firstTimestamp % 900000))
          const secondTimestamp = this.$vcext.randInt(2, allDay ? 288 : 8) * 900000
          const second = new Date(first.getTime() + secondTimestamp)

          events.push({
            name: this.calendar.names[this.$vcext.randInt(0, this.calendar.names.length - 1)],
            start: first,
            end: second,
            color: this.calendar.colors[this.$vcext.randInt(0, this.calendar.colors.length - 1)],
            timed: !allDay,
          })
        }

        this.calendar.events = events
      },
      getEventColor(event) {
        return event.color
      },
    }
  }
</script>
